<template>
	<view class="content">
		<view class="top">
			<view class="logo-box">
				<u-navbar title="客户详情" :titleStyle="{fontSize:'18',fontWeight: 'bold',color:'#fff'}" bgColor="#3477FC"
					leftIconColor="#fff" @click="leftClick" :autoBack="true" placeholder>
				</u-navbar>
				<!-- 顶部下拉 -->
			</view>
		</view>
		<view class="nr-box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">

				<view class="user-card">
					<view class="title-box">
						<view class="title-box-size">{{detailData.real_name}}</view>
						<!-- <view>
							<text class="cart cart-dianhua-yuankuang" style="font-size: 35px;color: #1afa29;"
								@click="callphone(detailData.mobile)"></text>
						</view> -->
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">客户电话：</span>
						<span>{{detailData.mobile || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">销售顾问：</span>
						<span>{{detailData.staffInfo.real_name || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">意向车型：</span>
						<span>{{detailData.cartInfo.title || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">预约时间：</span>
						<span>{{detailData.make_date || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">邀约分类：</span>
						<span>{{detailData.arrival_status == 1 ? '首邀':'二邀'}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">到店时间：</span>
						<span>{{detailData.arrival_date || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">到店次数：</span>
						<span>{{detailData.arrival_num || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">客户情况：</span>
						<span>{{detailData.customer_case || ''}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">报/诚/到：</span>
						<span>{{detailData.apply_state == 1 ? '是':'否'}}/{{detailData.amount_state == 1 ? '是':'否'}}/{{detailData.arrival_state == 1 ? '是':'否'}}</span>
					</view>
					<view class="user-size">
						<text class="cart" style="font-size: 15px;color: #3477FC;padding-right: 10rpx;"></text>
						<span class="b-color">备注：</span>
						<span>{{detailData.remark || ''}}</span>
					</view>

				</view>

				<view class="client-box">
					<view class="client-nr">
						<view class="nr-title">
							<view class="">
								跟进记录
							</view>
							<view>
								<!-- <text class="cart cart-zengjiatianjiajiahao" style="font-size: 30px;"
									@click="SaveText()"></text> -->
								<!-- <u-icon size="30" name="plus-circle" @click="SaveText()"></u-icon> -->
							</view>
						</view>
						<view class="nr-box">

							<view class="nr-item" v-for="(item,index) in followList" :key="index">
								<view class="oper-box">
									<view class="">
										{{item.update_time}}
									</view>
									<view class="oper-d">
										<view style="margin-right: 30rpx;">
											<u-icon name="edit-pen" size="25" @click='workerEdit(item)'>
											</u-icon>
										</view>
										<!-- <u-icon name="trash" size="25" @click='workerDel(item.id)'></u-icon> -->
									</view>
								</view>
								<view class="nr">
									{{item.content}}
								</view>
							</view>

						</view>
					</view>

					<view class="client-but" v-if="detailData.make_state == 1">
						<u-button type="primary" text="去修改" @click="textShow = true"></u-button>
						<u-button type="warning" text="取消预约" @click="cancelMake(id)"></u-button>
					</view>
				</view>

				<!-- 客户状态		 -->
				<!-- <u-picker :show="userShow" @confirm="typeSelectOk" closeOnClickOverlay keyName="label"
					@close="userShow = false" :columns="userColumns"></u-picker> -->
				<!-- 是否加微信 -->
				<!-- <u-picker :show="wxShow" @confirm="typeSelectOk" closeOnClickOverlay keyName="label"
					@close="wxShow = false" :columns="wxColumns"></u-picker> -->

				<!-- 客户状态		 -->
				<u-picker :show="userShow" @confirm="usertypeSelectOk" closeOnClickOverlay keyName="label"
					@close="UsercloseType" :columns="typeColumns" @cancel="usertypeSelectNot"></u-picker>
				<!-- 是否加微信 -->
				<u-picker :show="wxShow" @confirm="wxtypeSelectOk" closeOnClickOverlay keyName="label"
					@close="wxShow = false" :columns="wxColumns" @cancel="wxtypeSelectNot"></u-picker>

				<!-- 添加拨打电话用户状态	 -->
				<u-popup round="10" :show="textShow" :closeOnClickOverlay="false" :closeable="true" mode="center"
					@close="close" @open="open">
					<view class="form-box">
						<view class="client-cell">
							<u-cell :border='false' title="下次预约时间" :isLink="true" @click="makeDateShow = true">
								<text slot="value" style="color: #3477FC;">{{form.make_date ||''}}</text>
							</u-cell>
						</view>
						<view class="client-cell">
							<u-cell :border='false' title="客户情况" :isLink="true" @click="customerCaseShow = true">
								<text slot="value" style="color: #3477FC;">{{form.customer_case ||''}}</text>
							</u-cell>
						</view>
						<view class="client-cell">
							<u-cell :border='false' title="邀约分类" :isLink="true" @click="arrivalShow = true">
								<text slot="value"
									style="color: #3477FC;">{{form.arrival_status == 1 ? '首邀':'二邀'}}</text>
							</u-cell>
						</view>
						<view class="nr-text">
							<view class="nr-title">备注</view>
							<u-textarea height="90" v-model="form.remark" placeholder="请输入内容"></u-textarea>
						</view>
						<view class="client-but">
							<u-button type="primary" text="提交" @click='okform'></u-button>
						</view>
					</view>
					<u-toast ref="uToast"></u-toast>
				</u-popup>

				<u-modal :show="model.show" showCancelButton :title="model.title" :content='model.content'
					@confirm="emconfirm" @cancel="emcancel">
					<u-toast ref="uToast2"></u-toast>
				</u-modal>
				<!-- <u-datetime-picker :show="makeDateShow" value-format="yyyy-MM-dd HH:mm:ss" v-model="valueDate2"
					mode="datetime" @confirm="confirmMake" @cancel="makeDateShow = false"></u-datetime-picker> -->
				<u-picker :show="arrivalShow" @confirm="arrivalSelectOk" closeOnClickOverlay keyName="label"
					@close="arrivalclose" :columns="arrivalColumns" @cancel="arrivalSelectNot"></u-picker>
				<u-calendar :show="makeDateShow" :closeOnClickOverlay="false" @close="makeDateShow = false"
					@confirm="confirmMake"></u-calendar>
				<u-picker :show="customerCaseShow" :columns="customerCaseColumns" @confirm="confirmCustomerCase"
					@cancel="customerCaseShow = false"></u-picker>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		getWorkdetailApi,
		getWorksaveApi,
		getWorkdellApi,
		getWorkeditlApi
	} from '@/api/system/index'

	import {
		makeDetail,
		makeCancelArrival,
		makeUpdate
	} from '@/api/system/make'
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				navbar: 0, //状态栏高度
				statusBar: 0, // 状态栏高度 + 导航栏高度  
				customBar: 0, // 自定义标题与胶囊对齐高度

				butShow: null,
				textShow: false,
				typeName: "沃心相系  以礼相随",
				is_add: true,
				form: {
					content: null,
					wechat: 0,
					summary: '',
					userId: null,
					activeId: null,
					arrival_title: null,
					arrival_status: null
				},
				model: {
					show: false,
					title: '',
					content: '',
					is_men: true,
					id: null
				},
				queryParam: {
					keyword: ''
				},
				detailData: {},
				followList: [],
				typeShow: false,
				arrivalShow: false,
				arrivalColumns: [
					[{
						label: '首邀',
						id: 1
					}, {
						label: '二邀',
						id: 2
					}],
				],
				typeColumns: [
					[{
							label: '待跟客户',
							key: 'wait'
						},
						{
							label: '报名',
							key: 'notSincerity'
						},
						{
							label: '诚意金',
							key: 'okSincerity'
						},
						{
							label: '订单',
							key: 'orderNum'
						},
						{
							label: '重点',
							key: 'important'
						},
						{
							label: '有效',
							key: 'notBuy'
						},
						{
							label: '未接',
							key: 'notAnswer'
						},
						{
							label: '无效',
							key: 'invalid'
						}
					]
				],
				summaryKey: {
					all: "全部客户",
					wait: "待跟客户",
					notSincerity: "报名",
					okSincerity: "诚意金",
					orderNum: "订单",
					important: "重点",
					notBuy: "有效",
					notAnswer: "未接",
					invalid: "无效",
				},
				customerCaseColumns: [
					['价格问题', '车型问题', '首次了解', '其他问题']
				],
				valueDate2: Number(new Date()),
				makeDateShow: false,
				customerCaseShow: false,
				userShow: false,
				wxShow: false,
				userId: null,
				mobile: null,
				id: null,
				wxkey: {
					0: "否",
					1: "是"
				},
				wxColumns: [
					[{
							label: '是',
							key: 1
						}, {
							label: '否',
							key: 0
						}

					]
				],

			}
		},
		onLoad: function(options) {

			if (options.mobile) {
				this.mobile = options.mobile
			}
			if (options.id) {
				this.id = options.id
			}

		},
		mounted() {

			this.getWorkdetailData()
			this.getMakeDetail()
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
			// uni.getSystemInfo({ //获取系统信息
			// 	success: res => {
			// 		let navHeight = menuButtonObject.height + (menuButtonObject.top - res.statusBarHeight) *
			// 			2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
			// 		// 导航栏（胶囊）高度
			// 		this.titleBarHeight = navHeight;
			// 		//  状态栏（顶部）高度
			// 		this.statusBarHeight = res.statusBarHeight
			// 		console.log(this.titleBarHeight);
			// 		console.log(this.statusBarHeight);
			// 	},
			// 	fail(err) {
			// 		console.log(err);
			// 	}
			// })
			// #endif

		},
		created() {


		},
		methods: {
			getMakeDetail() {
				makeDetail({
					id: this.id
				}).then(res => {
					if (!res.code) {
						this.detailData = res.data
						this.form = JSON.parse(JSON.stringify(this.detailData))
					}
				})
			},
			getWorkdetailData() {

				getWorkdetailApi({
					mobile: this.mobile,
				}).then(res => {

					if (!res.code) {
						this.followList = res.data.follow
					}

				})


			},
			callphone(mobile) {
				uni.makePhoneCall({
					phoneNumber: mobile, //仅为示例
					success(res) {
						//用户拒绝权限后任然会走这个函数，

					},
					fail(err) {


					},
					complete() {



					}
				});

			},


			leftClick() {

			},
			confirmMake(e) {
				// var date = this.$moment(e.value).format("YYYY-MM-DD HH:mm:ss")
				// this.form.make_date = date;
				this.form.make_date = e[0];
				this.makeDateShow = false
			},
			confirmCustomerCase(e) {
				this.form.customer_case = e.value[0];
				this.customerCaseShow = false
			},
			open() {
				// console.log('open');
			},
			close() {
				this.textShow = false
				this.form = JSON.parse(JSON.stringify(this.detailData))
				// console.log('close');
			},
			getUserInfo(id) {
				this.$tab.navigateTo(`/pages/work/detail?id=${id}`)
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},

			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			//文本添加
			SaveText() {

				this.textShow = true
			},
			//
			clearKeyword() {

				this.queryParam.keyword = ''
			},
			change(e) {

			},
			usertypeSelectNot() {

				this.userShow = false
			},
			wxtypeSelectNot() {

				this.wxShow = false
			},
			wxclose() {

			},
			usertypeSelectOk(e) {
				var data = e.value[0]

				this.form.summary = data.key

				this.userShow = false

			},
			wxtypeSelectOk(e) {
				var data = e.value[0]

				this.form.wechat = data.key

				this.wxShow = false

			},
			async arrivalSelectOk(e) {
				var data = e.value[0]
				this.form.arrival_status = data.id
				this.form.arrival_title = data.label
				this.arrivalShow = false
			},
			arrivalclose() {
				this.arrivalShow = false
			},
			arrivalSelectNot() {
				this.arrivalShow = false
			},
			okform() {
				if (this.form.make_date == null || this.form.make_date == '') {

					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择下次预约时间"

					})
					return false
				}
				if (this.form.customer_case == null || this.form.customer_case == '') {

					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择客户情况"

					})
					return false
				}
				var that = this
				var param = {
					id: that.form.id,
					customer_case: that.form.customer_case,
					make_date: that.form.make_date,
					arrival_status: that.form.arrival_status,
					remark: that.form.remark,

				}
				//修改
				makeUpdate(param).then(res => {
					if (!res.code) {

						that.$refs.uToast.show({
							type: 'success',
							message: '更新成功',
							complete() {
								that.resetData()
								that.textShow = false
								that.getMakeDetail()

							}

						})


					}


				})

			},
			okWork() {

				var that = this
				that.form.followId = 0
				//添加
				getWorkeditlApi(that.form).then(res => {

					if (!res.code) {

						that.$refs.uToast2.show({
							type: 'success',
							message: '保存成功',
							complete() {
								that.resetData()
								that.textShow = false
								that.getWorkdetailData()
								that.$tab.reLaunch(`/pages/index/index`);
							}

						})


					}


				})

			},

			resetData() {

				this.form = {
					content: null,
					wechat: 0,
					summary: '',
					followId: 0

				}
			},
			workerDel(id) {

				this.model = {
					show: true,
					title: '删除',
					content: '确认要删除当前跟进记录？',
					is_men: false,
					id: id
				}
			},

			cancelMake(id) {

				this.model = {
					show: true,
					title: '取消预约',
					content: '确认要取消当前预约？',
					is_men: false,
					id: id
				}
			},
			workerEdit(item) {



				this.form.followId = item.id
				this.form.content = item.content

				this.textShow = true
				this.is_add = false


				// this.model = {
				// 		show: true,
				// 		title: '修改',
				// 		content: '确认要修改当前跟进记录？',
				// 		is_men: true,
				// 		id:id
				// 	}


			},
			emconfirm() {
				var that = this
				makeCancelArrival({
					id: that.id
				}).then(res => {

					if (!res.code) {

						that.$refs.uToast2.show({
							type: 'success',
							message: '取消成功',
							complete() {
								uni.navigateBack()
							}

						})
					}

				})
			},
			emcancel() {
				this.model = {
					show: false,
					title: '',
					content: '',
					is_men: true
				}

			}
		},


	}
</script>

<style lang="scss">
	page {
		background-color: #F4F5FF;
	}

	.scroll-Y {
		height: calc(100vh - 220rpx);
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

	}


	.content {
		.top {
			position: relative;
			display: flex;
			flex-direction: column;

			.logo-box {
				background-color: #3477FC;
				width: 100%;
				height: 200rpx;
				// position: absolute;
				font-weight: bold;
				// z-index: -100;


			}
		}

	}

	.index-box {
		position: absolute;
		bottom: 10%;
		width: 100%;
		padding: 0px 10px;

		// color: #fff;
		.index-cell {
			border: 1px solid #fff;
		}

		.index-right {
			display: flex;
			justify-content: space-between;
			color: #fff;
		}
	}

	.b-color {
		color: #AAA6A6;
	}

	.nr-box {

		width: 95%;
		margin: 0 auto;
		margin-top: 20px;

		.user-card {
			width: 95%;
			margin: 0 auto;
			padding: 0rpx 40rpx;
			background-color: #fff;
			border-radius: 10rpx;
			box-shadow: 0 0 10px #ccc;
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;

			.title-box {

				padding: 20rpx 0rpx;
				display: flex;
				justify-content: space-between;

				.title-box-size {
					color: #333333;
					font-size: 36rpx;
					font-weight: bold;
				}
			}

			.user-size {
				font-size: 32rpx;
				padding-bottom: 20rpx;
			}

		}




		.client-box {
			padding-bottom: 60rpx;

			.client-title {
				color: #333333;
				font-size: 36rpx;
				font-weight: bold;
				padding: 0rpx 40rpx;
				padding-bottom: 20rpx;
			}

			.client-cell {
				width: 95%;
				margin: 0 auto;
				background-color: #fff;
				box-shadow: 0 0 10px #ccc;
				padding: 5rpx 0rpx;
				border-radius: 5px;
				margin-bottom: 10px;
			}

			.client-nr {
				width: 95%;
				margin: 0 auto;
				background-color: #fff;
				border-radius: 5px;
				padding-bottom: 30rpx;


				.nr-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx;
					border-bottom: 1px solid #ccc;
				}

				.nr-box {
					padding-top: 10rpx;
					// padding-bottom: 40rpx;
					width: 95%;

					.nr-item {
						margin: 0 auto;
						background-color: #EDF5FF;
						border-radius: 15rpx;
						margin-bottom: 20rpx;
						padding-bottom: 20rpx;

						.oper-box {
							padding: 40rpx 20rpx;
							display: flex;
							justify-content: space-between;

							.oper-d {
								display: flex;
								flex-wrap: wrap;
							}
						}

						.nr {
							padding: 0px 40rpx;
						}

					}

				}

				.nr-but {
					width: 90%;
					margin: 0 auto;
				}
			}

			.client-but {
				width: 95%;
				margin: 0 auto;
				padding-top: 90rpx;
				position: fixed;
				bottom: 10px;
				display: flex;
			}
		}

	}

	.form-box {
		width: 640rpx;
		padding-bottom: 40rpx;
		margin-top: 50rpx;
		padding-top: 40rpx;

		.nr-text {
			padding: 0px 20rpx;

			.nr-title {
				color: #333;
				padding: 10rpx 0rpx;
			}
		}

		.client-cell {
			width: 95%;
			margin: 0 auto;
			background-color: #fff;
			box-shadow: 0 0 10px #ccc;
			padding: 5rpx 0rpx;
			border-radius: 5px;
			margin-bottom: 10px;
		}

		.client-but {
			width: 95%;
			margin: 0 auto;
			padding-top: 90rpx;
		}

	}
</style>